import React from 'react'
import { connect } from 'dva'
import PropTypes from 'prop-types'
import { Row, Col, Table, Button, Icon } from 'antd'
import { Page } from 'components'

import ReportBaseModal from './component/ReportBaseModal'
import styles from './detail.less'

const ButtonGroup = Button.Group

const ButtonProps = {
  size: 'large',
  style: {
    marginBottom: 0,
  },
}

const Label = ({ name }) => {
  return <h2>{ name }</h2>
}

Label.propTypes = {
  name: PropTypes.string,
}

const TransactionColumns = [
  {
    title: 'Tran No.',
    dataIndex: 'transactionNumber',
    key: 'transactionNumber',
  }, {
    title: 'Tarns Mode Code',
    dataIndex: 'transmodeCode',
    key: 'transmodeCode',
  }, {
    title: 'Tran Date',
    dataIndex: 'dateTransaction',
    key: 'dateTransaction',
  }, {
    title: 'Teller',
    dataIndex: 'teller',
    key: 'teller',
  }, {
    title: 'AmountLocal',
    dataIndex: 'amountLocal',
    key: 'amountLocal',
  }, {
    title: 'Real from Amount',
    dataIndex: 'fromAmount',
    key: 'fromAmount',
  }, {
    title: 'Report from Amount',
    dataIndex: 'fromAmountReport',
    key: 'fromAmountReport',
  }, {
    title: 'Real to Amount',
    dataIndex: 'toAmount',
    key: 'toAmount',
  }, {
    title: 'Real to Amount',
    dataIndex: 'toAmountReport',
    key: 'toAmountReport',
  }]

const phonesColumns = [
  {
    title: 'Type',
    dataIndex: 'contactType',
    key: 'contactType',
  }, {
    title: 'Communication Type',
    dataIndex: 'communicationType',
    key: 'communicationType',
  }, {
    title: 'Country Prefix',
    dataIndex: 'countryPrefix',
    key: 'countryPrefix',
  }, {
    title: 'Number',
    dataIndex: 'number',
    key: 'number',
  }, {
    title: 'Extension',
    dataIndex: 'extension',
    key: 'extension',
  }, {
    title: 'Comments',
    dataIndex: 'comments',
    key: 'comments',
  }]
const addressesColumns = [
  {
    title: 'Type',
    dataIndex: 'addressType',
    key: 'addressType',
  }, {
    title: 'Adress',
    dataIndex: 'address',
    key: 'address',
  }, {
    title: 'Town',
    dataIndex: 'town',
    key: 'town',
  }, {
    title: 'City',
    dataIndex: 'city',
    key: 'city',
  }, {
    title: 'State',
    dataIndex: 'state',
    key: 'state',
  }, {
    title: 'Country',
    dataIndex: 'countryCode',
    key: 'countryCode',
  }, {
    title: 'Zip',
    dataIndex: 'zip',
    key: 'zip',
  }, {
    title: 'Comments',
    dataIndex: 'comments',
    key: 'comments',
  }]

const employerPhonesColumns = [
  {
    title: 'Type',
    dataIndex: 'contactType',
    key: 'contactType',
  }, {
    title: 'Communication Type',
    dataIndex: 'communicationType',
    key: 'communicationType',
  }, {
    title: 'Country Prefix',
    dataIndex: 'countryPrefix',
    key: 'countryPrefix',
  }, {
    title: 'Number',
    dataIndex: 'number',
    key: 'number',
  }, {
    title: 'Extension',
    dataIndex: 'extension',
    key: 'extension',
  }, {
    title: 'Comments',
    dataIndex: '',
    key: 'comments',
  }]

const employerAddressColumns = [
  {
    title: 'Type',
    dataIndex: 'addressType',
    key: 'addressType',
  }, {
    title: 'Address',
    dataIndex: 'address',
    key: 'address',
  }, {
    title: 'Town',
    dataIndex: 'town',
    key: 'town',
  }, {
    title: 'City',
    dataIndex: 'city',
    key: 'city',
  }, {
    title: 'State',
    dataIndex: 'state',
    key: 'state',
  }, {
    title: 'Country',
    dataIndex: 'countryCode',
    key: 'countryCode',
  }, {
    title: 'Zip',
    dataIndex: 'zip',
    key: 'zip',
  }, {
    title: 'Comments',
    dataIndex: 'comments',
    key: 'comments',
  }]

const identificationsColumns = [
  {
    title: 'Type',
    dataIndex: 'type',
    key: 'type',
  }, {
    title: 'Expiry Date',
    dataIndex: 'expiryDate',
    key: 'expiryDate',
  }, {
    title: 'Issue Country',
    dataIndex: 'issueCountry',
    key: 'issueCountry',
  }, {
    title: 'Issue Date',
    dataIndex: 'issueDate',
    key: 'issueDate',
  }, {
    title: 'Issue By',
    dataIndex: 'issuedBy',
    key: 'issuedBy',
  }, {
    title: 'Number',
    dataIndex: 'number',
    key: 'number',
  }, {
    title: 'Comments',
    dataIndex: 'comments',
    key: 'comments',
  }]


const ReportDetail = ({ location, dispatch, loading, reportDetail }) => {
  let { data, hasData, modalVisible, transactionsIds, editType } = reportDetail
  let reportData = {}
  if (!hasData) {
    return null
  }
  const { reportingPerson, transactions } = data
  const { phones, addresses, employerPhone, employerAddress, identifications } = reportingPerson
  // transaction可选择
  const rowSelection = {
    onChange: (selectedRowKeys, selectedRows) => {
      // reportData.transactionIds = selectedRowKeys
      dispatch({ type: 'reportDetail/updateState', payload: { transactionsIds: selectedRowKeys } })
    },
  }

  const editReportBase = () => {
    dispatch({
      type: 'reportDetail/updateModalState',
      payload: {
        modalType: 'create',
        currentItem: {},
      },
    })
  }

  const modalProps = {
    visible: modalVisible,
    maskClosable: false,
    width: 800,
    title: 'Update Report Base',
    confirmLoading: loading.effects['reportDetail/update'],
    wrapClassName: 'vertical-center-modal',
    onOk (result) {
      dispatch({ type: 'reportDetail/updateState', payload: { data: { ...data, ...result } } })
      dispatch({
        type: 'reportDetail/hideModal',
      })
    },
    onCancel () {
      dispatch({
        type: 'reportDetail/hideModal',
      })
    },
  }

  const onAddReport = () => {
    reportData.reference = data.reference
    reportData.reportCode = data.reportCode
    reportData.submissionCode = data.submissionCode
    reportData.submissionDate = data.submissionDate
    reportData.reason = data.reason
    reportData.transactionIds = transactionsIds
    dispatch({ type: 'reportDetail/create', payload: reportData })
  }

  const onDeleteReport = () => {
    dispatch({ type: 'reportDetail/delete' })
  }

  const onDownXMLFile = () => {
    dispatch({ type: 'reportDetail/downXMLFile' })
  }

  return (
    <Page inner>
      <div className={styles.div_buttonGroup}>
        <ButtonGroup {...ButtonProps}>
          {
            editType === 'create' ? (
              <Button onClick={onAddReport}>Create <Icon type="save" /></Button>
            ) : (
              <div>
                <Button onClick={onDeleteReport}>Delete <Icon type="delete" /></Button>
                <Button onClick={onDownXMLFile}>Down XML <Icon type="file" /></Button>
              </div>
            )
          }
        </ButtonGroup>
      </div>
      <Label name="Report Base" />
      {
        editType === 'create' && (
          <div className={styles.div_buttonGroup}>
            <ButtonGroup {...ButtonProps}>
              <Button onClick={editReportBase}>
                Edit <Icon type="edit" />
              </Button>
            </ButtonGroup>
          </div>
        )
      }
      {
        modalVisible && <ReportBaseModal reportBase={data} modalProps={modalProps} />
      }
      <div className={styles.ItemBox}>
        <Row type="flex" justify="space-around" align="middle">
          <Col span={3}>
            Entity Reference
          </Col>
          <Col span={5}>
            {data.reference}
          </Col>
          <Col span={3}>
            FIU Rel No.
          </Col>
          <Col span={5} />
          <Col span={3}>
            Rep Entity Branch
          </Col>
          <Col span={5}>
            {data.rentityBranch}
          </Col>
        </Row>

        <Row>
          <Col span={3}>
            Submission Code
          </Col>
          <Col span={5}>
            {data.submissionCode}
          </Col>
          <Col span={3}>
            Submission Date
          </Col>
          <Col span={5} >
            {data.submissionDate}
          </Col>
          <Col span={3}>
            Report Code
          </Col>
          <Col span={5}>
            {data.reportCode}
          </Col>
        </Row>
        <Row>
          <Col span={3}>Action</Col>
          <Col span={21}>{data.action}</Col>
        </Row>
        <Row className={styles.ReasonBox}>
          <Col span={3}>
            Reason
          </Col>
          <Col span={21}>{data.reason}</Col>
        </Row>
      </div>

      <Label name="Transaction" />
      <Table pagination={false} rowSelection={editType === 'create' ? rowSelection : null} bordered columns={TransactionColumns} rowKey="id" dataSource={transactions} />

      <Label name="Reporting Person" />
      <div className={styles.ItemBox}>
        <Row type="flex" justify="space-around" align="middle">
          <Col span={3}>
            Alias
          </Col>
          <Col span={5}>
            {reportingPerson.alias}
          </Col>
          <Col span={3}>
            Gender
          </Col>
          <Col span={5} >
            {reportingPerson.gender}
          </Col>
          <Col span={3}>
            Mothers Name
          </Col>
          <Col span={5}>
            {reportingPerson.mothersName}
          </Col>
        </Row>
        <Row>
          <Col span={3}>
            Birth Place
          </Col>
          <Col span={5}>
            {reportingPerson.birthPlace}
          </Col>
          <Col span={3}>
            First Name
          </Col>
          <Col span={5} >
            {reportingPerson.firstName}
          </Col>
          <Col span={3}>
            Nationnalty 1
          </Col>
          <Col span={5}>
            {reportingPerson.nationality1}
          </Col>
        </Row>
        <Row>
          <Col span={3}>
            Birth Date
          </Col>
          <Col span={5}>
            {reportingPerson.birthdate}
          </Col>
          <Col span={3}>
            Middle Name
          </Col>
          <Col span={5} >
            {reportingPerson.middleName}
          </Col>
          <Col span={3}>
            Nationnalty 2
          </Col>
          <Col span={5}>
            {reportingPerson.nationality2}
          </Col>
        </Row>
        <Row>
          <Col span={3}>
            Deceased
          </Col>
          <Col span={5}>
            {reportingPerson.deceased}
          </Col>
          <Col span={3}>
            Last Name
          </Col>
          <Col span={5} >
            {reportingPerson.lastName}
          </Col>
          <Col span={3}>
            Nationnalty 3
          </Col>
          <Col span={5}>
            {reportingPerson.nationality3}
          </Col>
        </Row>
        <Row>
          <Col span={3}>
            Date Deceased
          </Col>
          <Col span={5}>
            {reportingPerson.deceasedDate}
          </Col>
          <Col span={3}>
            Employer Name
          </Col>
          <Col span={5} >
            {reportingPerson.employerName}
          </Col>
          <Col span={3}>
            Occupation
          </Col>
          <Col span={5}>
            {reportingPerson.occupation}
          </Col>
        </Row>
        <Row>
          <Col span={3}>
            Email
          </Col>
          <Col span={5}>
            {reportingPerson.email}
          </Col>
          <Col span={3}>
            Id Number
          </Col>
          <Col span={5} >
            {reportingPerson.idNumber}
          </Col>
          <Col span={3}>
            Passport Country
          </Col>
          <Col span={5}>
            {reportingPerson.passportCountry}
          </Col>
        </Row>
        <Row>
          <Col span={3}>
            Passport No.
          </Col>
          <Col span={5}>
            {reportingPerson.passportNumber}
          </Col>
          <Col span={3}>
            Prefix
          </Col>
          <Col span={5} >
            {reportingPerson.prefix}
          </Col>
          <Col span={3}>
            Residence
          </Col>
          <Col span={5}>
            {reportingPerson.residence}
          </Col>
        </Row>
        <Row>
          <Col span={3}>
            Source of Wealth
          </Col>
          <Col span={5}>
            {reportingPerson.sourceOfWealth}
          </Col>
          <Col span={3}>
            SSN
          </Col>
          <Col span={5} >
            {reportingPerson.ssn}
          </Col>
          <Col span={3}>
            Tax no.
          </Col>
          <Col span={5}>
            {reportingPerson.taxNumber}
          </Col>
        </Row>
        <Row>
          <Col span={3}>
            Tax Reg.No.
          </Col>
          <Col span={5}>
            {reportingPerson.taxRegNumber}
          </Col>
          <Col span={3}>
            Title
          </Col>
          <Col span={5} >
            {reportingPerson.title}
          </Col>
          <Col span={3}>
            Comments
          </Col>
          <Col span={5}>
            {reportingPerson.comments}
          </Col>
        </Row>
      </div>
      <Label name="Reporting Person Phones" />
      <Table bordered dataSource={phones} rowKey="id" columns={phonesColumns} pagination={false} />

      <Label name="Reporting Person Adress" />
      <Table bordered dataSource={addresses} rowKey="id" columns={addressesColumns} pagination={false} />

      <Label name="Reporting Employer Phones" />
      <Table bordered dataSource={[employerPhone]} rowKey="id" columns={employerPhonesColumns} pagination={false} />

      <Label name="Reporting Employer Address" />
      <Table bordered dataSource={[employerAddress]} rowKey="id" columns={employerAddressColumns} pagination={false} />

      <Label name="Reporting Indentification  " />
      <Table bordered dataSource={identifications} rowKey="id" columns={identificationsColumns} pagination={false} />
    </Page>
  )
}

ReportDetail.propTypes = {
  reportDetail: PropTypes.object,
  location: PropTypes.object,
  dispatch: PropTypes.func,
  loading: PropTypes.object,
}


export default connect(({ loading, reportDetail }) => ({ loading, reportDetail }))(ReportDetail)
